import { Button, Card, Form, Input, Select, Table } from 'antd'
import React from 'react'
//导入icon图标
import { SearchOutlined } from '@ant-design/icons';
//导入Option组件
const { Option } = Select
export default function HospitalList() {
    //表格的数据源
    const dataSource = [
        {
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
        },
        {
            key: '2',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
        },
    ];
    //表格的列
    const columns = [
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
        },
    ];
    return (
        <Card>
            <Form name="basic" autoComplete="off" layout='inline'>
                <Form.Item name="hosname">
                    <Select style={{ width: 180, marginBottom: 20 }} placeholder='请选择省'>
                        <Option value="北京市">北京市</Option>
                    </Select>
                </Form.Item>
                <Form.Item name="hosname">
                    <Select style={{ width: 180 }} placeholder='请选择市'>
                        <Option value="北京市">北京市</Option>
                    </Select>
                </Form.Item>
                <Form.Item name="hosname">
                    <Select style={{ width: 180 }} placeholder='请选择区'>
                        <Option value="北京市">北京市</Option>
                    </Select>
                </Form.Item>

                <Form.Item name="hosname">
                    <Input placeholder='医院名称' />
                </Form.Item>

                <Form.Item name="hoscode">
                    <Input placeholder='医院编号' />
                </Form.Item>

                <Form.Item name="hosname">
                    <Select style={{ width: 180 }} placeholder='医院类型'>
                        <Option value="北京市">北京市</Option>
                    </Select>
                </Form.Item>

                <Form.Item name="hosname">
                    <Select style={{ width: 180 }} placeholder='医院状态'>
                        <Option value="北京市">北京市</Option>
                    </Select>
                </Form.Item>

                <Form.Item>
                    <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
                        查询
                    </Button>
                </Form.Item>
                <Form.Item>
                    <Button htmlType="reset">
                        清空
                    </Button>
                </Form.Item>
            </Form>
            <div className='h-10'></div>
            {/* 表格组件 */}
            <Table dataSource={dataSource} columns={columns} bordered pagination={{
                //当前是第几页
                current: 1,
                //每页显示多少条数据
                pageSize: 5,
                //总条数
                total: 20,
                //配置分页下拉列表
                pageSizeOptions: [5, 10, 15, 20],
                //显示分页下拉列表
                showSizeChanger: true,
                //是否快速跳转页面
                showQuickJumper: true,
                //显示总数的回调
                showTotal: (total: number) => {
                    return `总共${total}条`
                },
                //当数字分页和下拉列表值发生变化的时候调用的事件
                onChange: (page: number, pageSize: number) => { 
                    
                }
            }} />
        </Card>
    )
}
